<template>
	<view class="container" :style="'height:'+ screenHeight +'px !important;'">

		<view class="search_input_box">
			<input @input="onInput($event)" class="search_input" confirm-type="search" @confirm="doSearch"
				maxlength="25" style="width: 100%; font-size: 28rpx;" focus placeholder="文章标题、作者等关键字"
				placeholder-style="color: #919191" :value="keyword" />

			<view class="search_icon" @click="doSearch">
				<uni-icons type="search" size="25" color="#474747" />
			</view>

		</view>

		<view class="list_cont">
			<view v-show="keyword.toString().trim().length==0">
				<view class="search_cache_box">
					<view class="search_cache_title_box">
						<text class="search_cache_title">搜搜历史</text>
						<text class="search_cache_clear" @click="clearTag">清空</text>
					</view>
					<view class="search_cache_tag_box">
						<view class="search_tag" v-for="(item,index) in cache_list" :key="index" :index="index"
							@click="tagClick(item)"><text>{{item}}</text></view>
					</view>
				</view>
			</view>

			<scroll-view v-show="keyword.toString().trim().length>0" class="scroll_view"
				:style="'height:'+ (screenHeight-80) +'px !important;'" scroll-y="true" @scrolltolower="loadMore"
				scroll-with-animation="true">
				<view class="item_content">
					<uni-card padding="0" spacing="0" @click="itemclick(aritcle)" margin="20"
						v-for="aritcle in article_list" :key="aritcle.info_id">
						<view class="item_card">
							<view class="item_card_box">
								<view class="item_card_title" v-html="aritcle.title"></view>
								<view class="item_card_author" v-html="aritcle.article_from"></view>
								<view class="item_card_text" v-html="aritcle.summery"></view>
							</view>
							<view class="item-arrow">
								<image style="width: 17rpx;height: 30rpx; margin-right: 30rpx;"
									src="/static/image/jt.png"></image>
							</view>
						</view>
					</uni-card>
				</view>
				<uni-section title="" type="line">
					<uni-load-more iconType="auto" :status="status" />
				</uni-section>
			</scroll-view>

		</view>

	</view>
</template>

<script>
	import api from './search.js'
	export default {
		data() {
			return {
				keyword: "",
				article_list: [],
				page: 1,
				screenHeight: 800,
				status: 'more',
				cache_list: [],
			}
		},
		onLoad(option) {
			var that = this;
			that.screenHeight = uni.getSystemInfoSync().windowHeight
			uni.getStorage({
				key: 'search_cache_history',
				success(res) {
					that.cache_list = res.data;
				}
			});
			uni.hideShareMenu( );
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			tagClick(tag) {
				this.keyword = tag;
				this.getSearchList();
			},
			itemclick(article) {
				//传的是对像，转成json字符串;
				uni.navigateTo({
					url: '/pages/article/article?article=' + encodeURIComponent(JSON.stringify(article))
				})
			},
			clearTag() {
				let that = this;
				that.cache_list = [];
				uni.setStorage({
					key: 'search_cache_history',
					data: that.cache_list,
					success: function() {}
				});
			},
			doSearch() {
				let that = this;
				if (that.keyword.length.toString().trim() > 0) {
					that.page = 1;
					that.article_list = [];
					that.getSearchList();
					if (that.cache_list.indexOf(that.keyword) == -1) {
						that.cache_list.unshift(that.keyword);
						if (that.cache_list.length > 10) {
							that.cache_list = that.cache_list.slice(0, 10);
						}
						uni.setStorage({
							key: 'search_cache_history',
							data: that.cache_list,
							success: function() {
								console.log('setStorage', 'success');
							}
						});
					}
				} else {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none',
						duration: 2000
					});
				}
			},
			onInput(e) {
				this.keyword = e.detail.value;
				if (this.keyword.length == 0) {
					this.page = 1;
					this.article_list = [];
				}
			},
			loadMore() {
				if (this.article_list.length == this.page * 10) {
					this.page++;
					this.getSearchList();
				}
			},
			async getSearchList() {
				this.status = 'loading';
				let res = await api.getSearchList(this.keyword, this.page);
				let data_list = res.data.data;
				let newkey = "<font style='color: #d3574b'>" + this.keyword + "</font>";
				for (let i = 0; i < data_list.length; i++) {
					data_list[i].title = data_list[i].title.replaceAll("\n", "").replaceAll(this.keyword, newkey);
					data_list[i].article_from = data_list[i].article_from.replaceAll("\n", "").replaceAll(this.keyword,
						newkey);
					data_list[i].summery = data_list[i].summery.replaceAll("\n", "").replaceAll(this.keyword, newkey);
				}
				this.article_list = [...this.article_list, ...data_list];
				if (res.data.data.length == 10) {
					this.status = 'more';
				} else {
					this.status = 'no-more';
				}
			},

		}
	}
</script>

<style lang="scss">
	@import "@/common/title_bar.css";
	@import "./search.scss";
</style>
